Refactoring a 2020 Create-React-App: Five Years Later
ScratchBook was my first "real" website. As a junior who never touched React or Node, back when React still meant class components, I made so many decisions that reading the old codebase five years later had me laughing out loud.
ScratchBook 1.0
Back in 2020, I was a college student eager to dive into web development. My programming experience was limited to academic C++ projects: calculators, OOP exercises, and basic data structure & algorithm studies. I decided it was time for something bigger.
After watching a few full-stack tutorials, I wanted to build something of my own. I never liked following tutorials blindly, so I took the core concepts and just decided to do my own thing. Instead of another to-do list, I created ScratchBook: a simplified Twitter/X clone where users could create and share public or private notes.
Frankly, the experience was... not very fun. React was still centered on class components, a steep climb for a junior developer. To make matters worse, I decided to learn everything at once: NodeJS, React, JWT for authentication, Material-UI, and Express. As if that wasn't enough, I threw Redux into the mix - Yes, Redux for a simple website with two routes. To this day, I still can’t understand why.
I poured far more time into that project than was probably necessary, but as a student, time was a resource I had in abundance. Was that chaotic process a shortcut to valuable experience, or just a fast track to back pain at 24? Maybe a bit of both. While struggling with that project, I implemented full-stack authentication, managed complex state, and learned to deploy a project for the world to see - lessons that undoubtedly shaped my early career.
The Temporary Ending
ScratchBook's life was tied to Heroku's free tier. When it was discontinued in 2022, the site went dark.
I often thought about rewriting it, especially as I became familiar with React Hooks and TypeScript. But my career as a freelance developer was taking off, and time was no longer abundant, so ScratchBook was left offline.
The 2025 Revival: ScratchBook 2.0
This September, I found myself with a rare bit of free time. A wave of nostalgia led me to browse my old GitHub repositories, where I saw ScratchBook, abandoned and outdated. I decided to spend a few days breathing new life into it, armed with five years of experience and a much better sense of modern web development practices.
The goal was to refactor, modernize, and strip out the horrible code of 2020. Here’s what changed:
From Class Components to Hooks: Replaced the cumbersome class lifecycle methods with the elegant simplicity of React Hooks.
Ditching Redux: Swapped the boilerplate-heavy Redux setup for the lightweight, built-in Context API - a much better fit for this project's scale. It made the codebase much more readable and simple.
JavaScript to TypeScript: Introduced static typing for a more robust, maintainable, and error-resistant codebase.
From Heroku to Vercel: Migrated the hosting to Vercel, for a seamless, modern deployment experience.
UI Modernization: Upgraded to the latest version of Material-UI, refreshing the look and feel.
ScratchBook 2.0 is now online. You can check it out here:
Reflections and What's Next
"The greatest glory in living lies not in never falling, but in rising every time we fall."
-- Nelson Mandela
This journey isn't quite over. The original ScratchBook was a monolithic full-stack application. Migrating that architecture to Vercel's serverless environment has introduced some issues, particularly with the MongoDB connection.
So if you give it a try, well, sometimes refreshing the page might fix whatever bug you encounter.
My next goal is to move the backend to my own personal VPS, which will give me more control and resolve these final bugs. That's a project for another day, but for now, ScratchBook lives on, even if kinda buggy :).
More than just a technical exercise, this was a powerful reminder that we all start somewhere. Cringing at my five-year-old code was the best medicine for the infamous "Impostor Syndrome." It’s a tangible measure of growth, proving that through every mistake and every attempt, we are constantly learning and evolving.
Keep learning and doing what you love.